<form [formGroup]="form" >
  <div *ngIf="!publication" class="form-group">

    <label>Origin of the file</label>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input" checked="form.value['type'] == 'UPLOAD'"
          value="UPLOAD" [formControl]="form.controls['type']">
        Drag & drop 
      </label>
    </div>
    <div class="form-check">
      <label class="form-check-label">
        <input type="radio" class="form-check-input"
          value="FOLDER" [formControl]="form.controls['type']" >
        Pick from the master repository
      </label>
    </div>
    <br/>
    <label for="publication-filename">EPUB, PDF, LPF or Readium Package file</label>
    <div *ngIf="form.value['type'] == 'UPLOAD'">
      <div ng2FileDrop
                      [ngClass]="{'nv-file-over': hasBaseDropZoneOver, 'nv-bad-file':notAPublication}"
                      (fileOver)="fileOverBase($event)"
                      [uploader]="uploader"
                      class="drop-zone">
          <div *ngIf="droppedItem&&!notAPublication">{{droppedItem.file.name}}</div>
          <div *ngIf="!droppedItem&&!notAPublication">Drop a publication here</div>
          <div *ngIf="droppedItem&&notAPublication">The file must have an .epub, .pdf, .lpf, .webpub, .audiobook or .divina extension.</div>
      </div>
    </div>
    <div *ngIf="form.value['type'] != 'UPLOAD'">
      <select
        id="publication-filename" class="form-control"
        [formControl]="form.controls['filename']">
        <option value="">Select a publication</option>
        <option *ngFor="let file of masterFiles">
          {{file.name}}
        </option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="publication-title">Title of the publication</label>
    <input
        id="publication-title" class="form-control" placeholder="Enter a title"
        [formControl]="form.controls['title']">
  </div>
  <button type="submit" (click)="onSubmit(true)"[disabled]="(((!uploader.getNotUploadedItems().length && !this.form.value['filename']) || !this.form.value['title'] || (!this.form.value['filename'] && notAPublication)) && !hideFilename) || (hideFilename && !this.form.value['title'])" class="btn btn-primary">{{submitButtonLabel}}</button>
  <button type="button" (click)="onCancel()" class="btn btn-secondary">Cancel</button>
</form>

<div id="snackbar">
  <div *ngIf="uploadConfirmation">
    <p>A publication with this name already exists. Shall we replace it with this new file?</p>
    <button (click)="hideSnackBar();onSubmit(false)">Yes</button><button (click)="hideSnackBar()">No</button>
  </div>
  <div *ngIf="!uploadConfirmation">
    {{errorMessage}}
  </div>
</div>
